<template>
  <router-view></router-view>
  <div class="my">
    <van-nav-bar title="个人中心" left-text="返回" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <!-- <button class="login" @click="goLogin">登录</button>
    <button class="register" @click="goReg">注册</button> -->
    <div class="my-title"></div>
    <div class="my-file">
      <input type="file" ref="file" @change="uploadFunc">
      <div class="my-btn">
        <button @click="saveImgFunc">保存头像</button>
      </div>
    </div>

    <div class="my-box">
      <div class="my-name">
        <h3>
          {{ user_nickname }}
        </h3>
      </div>
      <div class="my-img">
        <!-- 预览  -->
        <img v-if="user_avator" :src="user_avator" alt="">
      </div>
    </div>
    <div class="my-info">
      <p>别假装努力结局不会陪你演戏.</p>
    </div>
    <div class="my-set">
      <div class="set-title">
        <h3>常用功能</h3><span class="iconfont icon-qunfengtouxiangxuanze"></span>
      </div>
      <div class="set-list">
        <ul>
          <li @click="goPersonal">
            <div class="list-con">
              <span class="iconfont icon-gerenziliao"></span>
              <h5>个人资料</h5>
            </div>
            <p class="iconfont icon-youjiantou1"></p>
          </li>
          <li @click="goCollect">
            <div class="list-con">
              <span class="iconfont icon-shoucangxinyuandanyuanwangqingdantuijian"></span>
              <h5>我的收藏</h5>
            </div>
            <p class="iconfont icon-youjiantou1"></p>
          </li>
          <li @click="goOrder">
            <div class="list-con">
              <span class="iconfont icon-caidanguanli"></span>
              <h5>我的订单</h5>
            </div>
            <p class="iconfont icon-youjiantou1"></p>
          </li>
          <li @click="goArea">
            <div class="list-con">
              <span class="iconfont icon-dizhi"></span>
              <h5>我的地址</h5>
            </div>
            <p class="iconfont icon-youjiantou1"></p>
          </li>
          <li>
            <!-- <div class="list-con">
              <span class="iconfont icon-shezhi"></span>
              <h5>设置</h5>
            </div>
            <p class="iconfont icon-youjiantou1"></p> -->
            <p class="iconfont icon-shezhi"></p><van-cell is-link title="设置" @click="show = true"></van-cell>
            <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
          </li>
        </ul>
      </div>
    </div>


  </div>
</template>
<script lang="ts" setup>

// 导入Vue相关的API
import { defineComponent, reactive, ref, onBeforeUnmount } from "vue";
import my from "@/components/personal/area.vue";
import { useRoute, useRouter } from 'vue-router';
// import { useRouter } from 'vue-router'
import { showToast } from 'vant';
// 导入上传图片/保存图片的API
import { upLoadImg, saveImg, deleteImg, getAvatorNickName, getHotList } from '../request'
// 记录图片路径
let user_avator = ref('');
let user_nickname = ref('');
// 记录旧的头像
let old_user_avator = ref('');
let preview_user_avator = ref('');
let isPreview = ref(false);
// 获取token信息
let token = localStorage.getItem('auto_token');

// 选择图片/预览图片
const uploadFunc = (event: Event) => {
  // console.log(event)// 事件对象
  // 获取input标签
  let inpElement: any = event.target;
  // 获取图片信息
  let file = inpElement.files[0];
  // 判断选择的文件是否为图片格式
  // .....
  // 记录图片文件信息
  let formData = new FormData();
  formData.append('photo', file);
  // formData.append('xxx', xxx);
  // formData.append('xxx', xxx);
  // 调用上传图片的API
  upLoadImg(formData, { headers: { token } }).then((content: any) => {
    // console.log(content)
    // 解构赋值
    let { code, msg, picUrl } = content;
    if (code == 200) {
      // 预览图片
      user_avator.value = picUrl;
      preview_user_avator.value = picUrl;
      // 打开预览设置布尔值
      isPreview.value = true;
    }
    // 提示
    showToast(msg);
  })
    .catch(error => {
      console.log(error)
    })
}
// 保存头像
const saveImgFunc = () => {
  // 保存图片信息
  // console.log({user_avator: user_avator.value});
  saveImg({ user_avator: user_avator.value }, { headers: { token } })
    .then((content: any) => {
      // console.log('x.0',content)
      let { code } = content;
      if (code == 200) {
        // 显示当前头像
        user_avator.value = content.user_avator;
        // 删除旧的头像图片
        console.log('xxxx', { user_avator: old_user_avator.value })
        deleteImg({ user_avator: old_user_avator.value }, { headers: { token } })
          .then(result => {
            console.log('删除旧头像:', result)
          })
        // 关闭预览
        isPreview.value = false;
      }
    })
    .catch(error => {
      console.log(error)
    })
}

// 初始化个人中心
const initFunc = () => {
  getAvatorNickName({ token })
    .then(
      (content: any) => {
        let { data, code } = content;
        if (code == 200) {
          console.log("y.0", content)
          // 获取用户的昵称和头像
          user_avator.value = data[0].user_avator;
          user_nickname.value = data[0].user_nick_name;
          // 记录旧头像（目的为了给用户修改头像）
          old_user_avator.value = data[0].user_avator;
        }
      }
    )
}
initFunc();
// 离开组件
onBeforeUnmount(() => {
  if (isPreview.value) {
    // 删除预览的头像图片
    console.log('xxxx', { user_avator: old_user_avator.value })
    deleteImg({ user_avator: preview_user_avator.value }, { headers: { token } })
      .then(result => {
        console.log('删除预览:', result)
      })
  }
})

const onClickLeft = () => history.back();
defineComponent({

})

const show = ref(false);
const actions = [
  { name: '退出个人中心' },
  { name: '取消' },
];
const router = useRouter();
const onSelect = (item: any) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  show.value = false;
  // showToast(item.name);
  console.log(item);
  if (item.name == '退出个人中心') {
    router.push({
      path: '/login',
    })
  } else if (item.name == "取消") {
    show.value = false;
  }

};





const goPersonal = () => {
  router.push({
    path: '/personal',
  })
}
const goCollect = () => {
  router.push({
    path: '/collect',
  })
}
const goOrder = () => {
  router.push({
    path: '/order',
  })
}
const goArea = () => {
  router.push({
    path: '/area',

  })
}
const goSet = () => {
  router.push({
    path: '/set',

  })
}
const goLogin = () => {
  router.push({
    path: '/login',
  })
}
const goReg = () => {
  router.push({
    path: '/register',
  })
}
</script>

<style lang="scss" >
@import url(../static/style/reset.css);
@import "../static/style/variable.scss";

.my {
  position: relative;
  width: 100%;
  height: 830px;
  background-color: #f8f8f8;

  .my-title {

    width: 100%;
    height: 200px;
    background-color: #2b4c7e;
    background-image: url(../static/images/bg3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    // background-position-y: -100px;
    background-position: center center;
    // background-position-x: 50px;
  }

  .my-box {
    display: flex;
    position: absolute;
    top: 210px;
    right: 20px;

    .my-img {

      width: 3.5rem;
      height: 3.5rem;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 2.6667rem;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .my-name {
      margin: .6333rem;

      h3 {
        color: #fbf5f5;
        text-shadow: 1px 1px 0 #7a7c7e;
      }
    }
  }

  .my-info {
    position: absolute;
    top: 280px;
    right: 10px;
    font-size: 12px;
  }

  .my-set {
    width: 100%;
    margin-top: 4.3333rem;

    .set-title {
      width: 100%;
      justify-content: space-between;
      display: flex;

      h3 {
        padding-left: .4rem;
        width: 6rem;
        border-left: 3px solid $backGroundColor;
        font-size: 17px;
      }

      span {
        margin-right: 1.3333rem;
      }
    }

    .van-cell__value {
      text-align: left;
      color: #65686b;
      font-size: 13.5px;
    }

    .van-overlay {
      opacity: .4;
    }

    .set-list {
      width: 100%;
      background-color: #fff;
      overflow: hidden;
      margin-top: 1rem;
      height: 27rem;

      ul {
        width: 95%;
        margin: 0 auto;

        li {
          display: flex;
          justify-content: space-between;
          height: 3rem;
          line-height: 3rem;
          margin-top: 1.5rem;
          margin-bottom: 1.2rem;
          width: 100%;

          border-radius: 5px;
          overflow: hidden;
          box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.12);


          .list-con {
            margin-left: .7333rem;
            display: flex;

            span {
              padding-right: .6rem;
              font-size: 18px;
              color: #2b4c7e;
            }

            h5 {
              color: #76787a;
              font-size: 14px;
            }
          }

          p {
            margin-right: .6333rem;
            font-size: 18px;
          }

          &:last-child {
            p {
              padding-left: .8rem;
              font-size: 18px;
              color: #2b4c7e;
            }

            .van-cell__title {


              span {
                color: #76787a;
                font-size: 15px;
                font-weight: 600;
              }
            }

            .van-cell {
              padding: .7333rem 0;
            }

            .van-cell__right-icon {
              padding-right: .6rem;
              color: #000;
            }
          }
        }
      }
    }

  }

  .my-file {
    opacity: 0;
    position: absolute;
    top: 37%;
    right: 0;

    input {
      width: 5rem;
    }

    button {
      width: 5rem;
    }
  }
}
</style>